<template>
	<z-paging>
		<template #top>
			<view class="head-bg relative bg-white">
				<view :style="{height:api.navbarHeight+'px'}"
					style="position: relative;z-index: 999;">
					<view class="flex align-center justify-between" style="position: absolute;width: calc(100% - 40rpx);"
						:style="{left:20 + 'rpx',bottom:0 +'px'}">
						<view>
				
						</view>
						<view
							class="flex-1 flex align-center justify-center text-lg text-bold text-white padding-bottom-sm ">
							哈普抽奖红包
						</view>
					</view>
				</view>
				<view class="absolute center-box flex align-center justify-center" :class="{'no-background':!is_win}">
					<view class="title text-color">
						{{is_win ? '恭喜你' : '抱歉'}}
					</view>
				</view>
			</view>
			<view class="flex flex-direction align-center bg-white padding-bottom">
				<view class="w-full flex flex-direction align-center" v-if="is_win">
					<view class="text-lg text-black text-bold">
						获得消费券
					</view>
					<view class="text-golden text-48 text-bold margin-tb">
						40
					</view>
					<view class="text-sm text-black">
						已存入您的消费券账户，可用于消费券消费
					</view>
					<view class="w-80 padding-tb-sm flex align-center justify-center padding-tb-sm text-lg text-bold round bg-red margin-top" style="width: 500rpx; height: 100rpx;">
						<u-icon name="weixin-fill" size="52"></u-icon>
						<text class="margin-left-sm">邀请好友抢红包</text>
					</view>
				</view>
				<view class="margin-tb text-lg text-black text-bold" v-else>
					活动已结束
				</view>
				<view class="w-80 padding-tb-sm flex align-center justify-center padding-tb text-lg text-bold round bg-white solid line-red  text-red margin-top" @click="$api.toPage('/pages/home/home')">
					<view class="margin-left-sm flex justify-center align-center" style="width: 500rpx; height: 50rpx;color:#FF3935 ;">进入商城</view>
				</view>
			</view>
		</template>
		<view class="padding-top">
			<view class="padding item" v-for="item,index in list" :key="index">
				<view class="text-gray text-sm margin-bottom" v-if="index === 0">
					共200个红包，已抢100个
				</view>
				<view class="flex align-center justify-between">
					<u-avatar :src="item.avatar" size="88"></u-avatar>
					<view class="margin-lr flex-1 text-cut">
						<view class="text-df text-bold">
							<text>{{index + 1}}.</text><text>{{item.name}}</text>
						</view>
						<view class="margin-top-sm text-gray">
							{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh-MM-ss')}}
						</view>
					</view>
					<view :class="[[0,1,2].includes(index) ? 'text-red' : 'text-black']">
						<text class="text-22 text-bold">{{item.price}}</text>
						<text class="text-sm margin-left-xs">消费券</text>
					</view>
				</view>
			</view>
        <u-tabbar v-model="current" :list="lists"></u-tabbar>
		</view>
	</z-paging>
</template>

<script>
	export default {
		computed: {
			api() {
				return this.$api
			}
		},
		data(){
			return{
        lists: [
                  {
                    iconPath: "home",
                    selectedIconPath: "home-fill",
                    text: "首页",  
                    customIcon: false,
                     pagePath:"/pages/home/home"
                  },
                  {
                    iconPath: "account",
                    selectedIconPath: "account-fill",
                    text: "个人中心",
                    customIcon: false,
                    pagePath:"/pages/index/index"
                  }],
                  current:0,
				is_win:true,
				list:[{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				},{
					avatar:'https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/avatar.png',
					name:'就卡的前景',
					create_time:150000000,
					price:118
				}]
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-bg{
		background-image: url(https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/head-bg.png);
		height: 440rpx;
		background-size: 100% 85%;
		background-repeat: no-repeat;
	}
	.center-box{
		background-image: url(https://env-00jxt1fzew48.normal.cloudstatic.cn/red-packet/center-bg.png);
		background-size: 100% 100%;
		width: 70%;
		height: 328rpx;
		bottom: -20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.no-background{
		background-image: none !important;
	}
	.title{
		font-size: 64rpx;
	}
	.text-color{
		color:#FFEED2;
	}
	.text-22{
		font-size: 44rpx;
	}
	.text-48{
		font-size: 96rpx;
	}
	.text-golden{
		color:#D7A96B;
	}
	.w-full{
		width:100%;
	}
	/* 为 .item 元素的第一个添加样式 */
	.item:nth-child(1) {
	  background-image:linear-gradient(to bottom , #FFF3F3 0, #FEFCFB 100%) ; 
	}
	
	/* 为 .item 元素的第二个添加样式 */
	.item:nth-child(2) {
	  background-image:linear-gradient(to bottom , #FDF2FF 0, #FEFEFF 100%) ; 
	}
	
	/* 为 .item 元素的第三个添加样式 */
	.item:nth-child(3) {
	  background-image:linear-gradient(to bottom , #F3F9FF 0, #FEFEFF 100%) ; 
	}
	.item{
		background-color: white;
	}
</style>